// React + TS

// 为事件prop添加类型，组件经常执行类型为函数的prop实现子传父，这类prop重点在于函数参数类型的注解
type Props = {
	onGetMsg?: (msg: string) => void
}
function Son(props: Props) {
	const { onGetMsg } = props

	const clickHandler = () => {
		// 仅当onGetMsg有值的时候才执行该函数
		onGetMsg?.("this is son msg")
	}

	return <button onClick={clickHandler}>sendMsg</button>
}

function App() {
	// 如果是通过单独定义函数，传入子组件中，则必须显示声明函数的参数类型，并必须与子组件的参数定义类型完全一致
	const getSonMsgHandler = (msg: string) => {
		console.log(msg)
	}

	return (
		<>
			This is App
			{/* 在父组件调用子组件事需要遵守类型的约束，参数传递需要满足要求 */}
			{/* 绑定prop时，如果是通过内联函数，则不需要显示声明参数类型，可以根据子组件函数的定义自动推断出参数类型 */}
			<Son onGetMsg={(msg) => console.log(msg)} />
			{/* 在绑定prop时，如果函数已经定义了参数类型，则必须显示声明参数类型，并且与子组件参数类型定义完全一致 */}
			<Son onGetMsg={getSonMsgHandler} />
		</>
	)
}

export default App
